{% extends 'base.html' %}

{% block title %}
Sales Dashboard | Online Retail POS
{% endblock %}

{% block nav-item %}
<div class="mb-0 font-weight-bold  h5 text-gray-500 text-uppercase p-3 "> Sales Dashboard </div>
{% endblock %}


{% block content %}
<div class="row col-lg-12">
    <div class="col-lg-5" style="width:100%;">
        <div class="fluid">
            <div class="card border-left-success shadow-sm mb-3">
                <div class="card-header">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-md font-weight-bold text-success text-uppercase mb-1"> Today's Sales </div>
                            <div class="h3 mb-1 font-weight-bold text-gray-800" style="text-align:right">{{ today_total_sales|floatformat:2 }}</div>
                        </div>    
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-body m-0 p-1">
                    {{ day_payment_graph|safe}}
                </div>
            </div>
        </div>
        <hr>
        <div class="row col-lg-12 m-0 p-0" >
            {% for key, value in add_info.items %}
            <div class="col-lg-6 mb-2" style="height:85px;width:100%">
                <div class="card border-left-info shadow-sm" style="width:100%;height:100%">
                    <div class="card-body" style="width:100%">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1"> {{ key}} </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">${{ value|floatformat:2 }}</div>
                            </div>    
                            <div class="col-auto">
                                <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
            {% endfor %}
        </div>
    </div>
    <div class="col-lg-7" >
        <!-- <div class="row">
            <a class="col-lg-6 p-3" href="{% url 'dashboard_department' %}">
                <button class="btn btn-primary btn-lg" style="width:100%;">
                    Go to Department Dashboard
                </button>
            </a>
            <a class="col-lg-6 p-3" href="{% url 'dashboard_department' %}">
                <button class="btn btn-primary btn-lg" style="width:100%;">
                    Go to Inventory Dashboard
                </button>
            </a>
        </div> -->
        <div class="card shadow">
            <div class="card-header">
                <div class="font-weight-bold text-primary h5 text-center"> Last 30-Days Sales Chart </div>
                <div> Total Sales - {{30_Days_Total_Sales|floatformat:2 }} $  <br> Average - {{ 30_Days_Avg_Sales|floatformat:2 }} $</div> 
            </div>
            <div class="card-body " >
                {{ 30_day_sales_graph |safe}}
            </div>
        </div>
    </div>
</div>
<hr>
{% endblock %}
